﻿<template>
  <div class="bg_get_voice_container">
  <div class="bg_get_voice clearfix">
       <div class="bg_g_v_top">
         <!--<div class="get_voice_btn">-->

         <!--</div>-->
         <!--</div>-->
         <div class="wrapper_this clearfix">
           <div class="get_voice_b" v-on:click="voice_operation">
             <img src="../../../static/img/start.png" v-show="if_p" >
             <img src="../../../static/img/stop.png" alt="" v-show="!if_p">
             <p class="luying" v-show="if_p">录音</p>
             <p class="luying"  v-show="!if_p">播放</p>
           </div>
           <div class="get_voice_b">
             <img src="../../../static/img/close_fs.png">
             <p>删除</p>
           </div>
         </div>
       <!--<div class="bg_g_bottom">-->

       <!--</div>-->
     </div>
  </div>
    <!--next box-->
  <div class="next_box clearfix">
      <div class="next_btn_base" v-on:click="pre_c">
        上一步
      </div>
      <div class="next_btn_base" v-on:click="next_c">
        下一步
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import common from "../../common/common.js";
  import mui_c from "mui_c/mui_common.js"
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  let qs = require('qs');

export default {
  name: 'bg_get_voice',
  data () {
    return {
      if_p:true,
      voice_url:"",
    }
  },
  mounted: function () {


  },
  methods: {
    pre_c:function () {
      common.go_back_none_btn()
    },
    next_c:function () {
      if(!this.voice_url){
        this.$store.dispatch("thom_redirect",
          { name: "/beginner_m_wrapper/bg_get_msg_m", router: this.$router });
          return;
      }//没有 voice 就不执行
      Indicator.open();
      mui_c.up_load(
          this.voice_url,
          (t)=>{
            console.log("success");
            console.log(t);
            this.$store.commit("set_B_M",{voice:t});
            console.log(this.$store.getters.get_B_M);
            Indicator.close();
          },
          ()=>{
            Indicator.close();
          }
      )
      this.$store.dispatch("thom_redirect",
        { name: "/beginner_m_wrapper/bg_get_msg_m", router: this.$router });
    },
    voice_operation:function(){
      if(this.if_p){
        document.addEventListener( "plusready", ()=>{
          mui_c.record_f(this);//录音
        })

      }else{
        document.addEventListener( "plusready", ()=> {
          mui_c.play_music(this.voice_url)//播放
        })
      }
    },

  },
  components: {

  }
}
</script>
<style scoped lang="scss">
@import "../../../static/sass/thom_c_size.scss";
@import "../sass/bg_get_voice.scss";
</style>
